<template>
  <el-form label-width="100px">
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请输入SKU名称"
        v-model="skuParams.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="请输入价格" v-model="skuParams.price"></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input placeholder="请输入重量" v-model="skuParams.weight"></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        type="textarea"
        placeholder="描述"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <!-- 通过遍历attrArr获取到相应的属性并展示属性名 -->
        <el-form-item
          v-for="(item, index) in attrArr"
          :key="item.id"
          :label="item.attrName"
          style="width: 200px"
        >
          <el-select v-model="item.attrIdAndValueId">
            <!-- 遍历attrArr中的属性值数组并展示 -->
            <!-- :value="`${item.id}:${attrValue.id}`" 目的是从option中收集相应属性id和值的id以便整理成服务器要求的格式好发送请求-->
            <el-option
              :value="`${item.id}:${attrValue.id}`"
              v-for="(attrValue, index) in item.attrValueList"
              :key="attrValue.id"
              :label="attrValue.valueName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form>
        <el-form-item
          v-for="(item, index) in saleArr"
          :key="item.id"
          :label="item.saleAttrName"
          style="width: 200px"
        >
          <!-- 此处的v-model一方面是是为了收集用户输入的数据，另一方面是为了收集option传递的:value，方便发送请求之前解构成需要的数据格式 -->
          <el-select v-model="item.saleIdAndValueId">
            <!-- :value收集销售属性跟属性值id -->
            <el-option
              :value="`${item.id}:${saleAttrValue.id}`"
              v-for="(saleAttrValue, index) in item.skuSaleAttrValueList"
              :key="saleAttrValue.id"
              :label="saleAttrValue.saleAttrValueName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <!-- 使用table时需要把存储的数据传递给table，再到每个表格项中使用插槽/prop展示数据 -->
      <el-table border :data="imgArr" ref="table">
        <el-table-column
          type="selection"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.imgUrl" alt="1" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button type="primary" size="small" @click="handlder(row)">
              恢复默认
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
// 引入API
import { reqAttr } from '@/api/product/attr'
import {
  reqAddSku,
  reqSpuHasSaleAttr,
  reqSpuImageList,
} from '@/api/product/spu'
import type { SkuData } from '@/api/product/spu/type'
import { ElMessage } from 'element-plus'
import { reactive, ref, registerRuntimeCompiler } from 'vue'
// 存储平台属性
let attrArr = ref<any>([])
//存储销售属性
let saleArr = ref<any>([])
//存储照片墙数据
let imgArr = ref<any>([])
//接收自定义事件
let $emit = defineEmits(['changeScence'])
//收集sku的参数(只有收集到跟接口数据格式匹配的数据才能发送最终的添加sku请求)
let skuParams = reactive<SkuData>({
  category3Id: '',
  spuId: '',
  tmId: '',
  // v-model收集
  skuName: '',
  price: '',
  weight: '',
  skuDesc: '', //sku描述
  skuAttrValueList: [], //平台属性收集
  skuSaleAttrValueList: [], //销售属性
  skuDefaultImg: '', //sku图片地址
})
//获取table实例
let table = ref<any>()
// 取消事件的回调
function cancel() {
  $emit('changeScence', { flag: 0, params: '' })
}
//定义子组件添加sku方法的回调并暴露
// 接收父组件传递的参数id
async function initSKUData(c1Id: number, c2Id: number, spu: any) {
  //收集数据
  skuParams.category3Id = spu.category3Id
  skuParams.spuId = spu.id
  skuParams.tmId = spu.tmId
  //添加sku需要的数据在这里发请求
  //获取平台属性
  let result: any = await reqAttr(c1Id, c2Id, spu.category3Id)
  //获取对应的销售属性
  let result1: any = await reqSpuHasSaleAttr(spu.id)
  // 获取照片墙的数据
  let result2: any = await reqSpuImageList(spu.id)
  //存储数据
  attrArr.value = result.data
  saleArr.value = result1.data
  imgArr.value = result2.data
}
defineExpose({ initSKUData })
//恢复默认图片方法回调
function handlder(row: any) {
  //点击某一项先默认全部复选框不勾选
  imgArr.value.forEach((item: any) => {
    table.value.toggleRowSelection(item, false)
  })
  //获取table实例点击恢复按钮选中复选框（选中图片才勾选）
  table.value.toggleRowSelection(row, true)
  //收集图片地址
  skuParams.skuDefaultImg = row.imgUrl
}
//保存发送新增sku请求的回调
async function save() {
  //整理参数
  //平台属性
  skuParams.skuAttrValueList = attrArr.value.reduce((prev: any, next: any) => {
    // 检查当前项 next.attrIdAndValueId 是否存在。如果存在，则继续处理；否则跳过该项。
    if (next.attrIdAndValueId) {
      let [attrId, valueId] = next.attrIdAndValueId.split(':')
      // 将分割后的 attrId 和 valueId 构造成一个对象 { attrId, valueId }，并将其推入结果数组 prev
      prev.push({
        attrId,
        valueId,
      })
    }
    return prev
  }, [])
  //销售属性
  skuParams.skuSaleAttrValueList = saleArr.value.reduce(
    (prev: any, next: any) => {
      if (next.saleIdAndValueId) {
        let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(':')
        prev.push({
          saleAttrId,
          saleAttrValueId,
        })
      }
      return prev
    },
    [],
  )
  //发送请求
  let result: any = await reqAddSku(skuParams)
  if (result.code === 200) {
    ElMessage({
      type: 'success',
      message: '添加SKU成功',
    })
    $emit('changeScence', { flag: 0, params: '' })
  } else {
    ElMessage({
      type: 'error',
      message: '添加SKU失败',
    })
  }
}
</script>

<style></style>
